<template>
  <div class="contentoutbox">
    <van-loading size="24px" vertical v-show="loading">图片生成中...</van-loading>
    <slot name="postercontent"></slot>
  </div>
</template>

<script lang="ts">
import html2canvas from "html2canvas";
import { Loading } from "vant";
import { qrcanvas } from "qrcanvas";

export default {
  name: "posterCode",
  props: {
    isloading: Boolean,
    default: false
  },
  components: {
    "van-loading": Loading
  },
  data() {
    return {
      loading: false
    };
  },
  created() {},
  methods: {
    qrcanvasImg(logo, url, dom) {
      const image = new Image();
      image.src = "lkjsdfj";
      image.crossOrigin = "*";
      image.onload = () => {
        const canvas = qrcanvas({
          data: url,
          size: 250,
          correctLevel: "H"
        });
        let img = document.getElementById(dom);
        img.src = canvas.toDataURL("image/jpeg");
      };
      image.onload();
    },
    getUrl(url, cb) {
      let image = new Image();
      image.src = url + "&v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = () => {
        let base64 = this.getBase64Image(image);
        cb && cb(base64);
      };
    },
    getBase64Image(img) {
      let canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      let dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
      return dataURL;
    },
    getPromoCodeFn(father, imgpic) {
      if (this.isloading) {
        this.loading = true;
      }
      this.$nextTick(() => {
        let screenHeight = document.getElementById(father).offsetHeight;
        let screenWidth = document.getElementById(father).offsetWidth;
        const canvas = document.createElement("canvas"); //创建一个canvas节点
        canvas.width = screenWidth * 3; //定义canvas 宽度 * 缩放
        canvas.height = screenHeight * 3; //定义canvas高度 *缩放
        let ctx = canvas.getContext("2d"); //获取context,设置scale
        ctx.save();
        this.ctx = ctx;
        this.canvas = canvas;
        let ele = document.getElementById(father);
        let opts = {
          scale: 3, // 添加的scale 参数
          canvas: this.canvas, //自定义 canvas
          logging: false, //日志开关，便于查看html2canvas的内部执行流程
          width: screenWidth, //dom 原始宽度
          height: screenHeight,
          useCORS: true,
          allowTaint: false
        };
        setTimeout(() => {
          const _this = this;
          html2canvas(ele, opts).then(function (canvas) {
            // 【重要】关闭抗锯齿
            _this.ctx.mozImageSmoothingEnabled = false;
            _this.ctx.webkitImageSmoothingEnabled = false;
            _this.ctx.msImageSmoothingEnabled = false;
            _this.ctx.imageSmoothingEnabled = false;
            let img = document.getElementById(imgpic);
            img.src = `${canvas.toDataURL("image/jpg")}`;
          });
          if (this.isloading) {
            this.loading = false;
            this.$emit("loadedMethod");
          }
        }, 1000);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.contentoutbox {
  /*height: inherit*/
}
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
}
</style>
